<!DOCTYPE html>
<html class="x-admin-sm">

	<head>
		<meta charset="UTF-8">
		<title>课程教师选择</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
		<link rel="stylesheet" href="./css/font.css">
		<link rel="stylesheet" href="./css/xadmin.css">
		<link rel="stylesheet" href="css/global.css" />
		<script src="./lib/layui/layui.js" charset="utf-8"></script>
		<script src="js/commons.js"></script>

	</head>

	<body>
		<div class="x-nav">
			<span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">演示</a>
                <a>
                    <cite>导航元素</cite></a>
            </span>
			<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
				<i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
			</a>
		</div>
		<div class="layui-fluid">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md12">
					<div class="layui-card" id="app">
						<div class="layui-card-body ">
							<form class="layui-form layui-col-space5">
								<div class="layui-input-inline layui-show-xs-block">
									<input type="text" id="name" placeholder="教师名称" autocomplete="off" class="layui-input">
								</div>

								<div class="layui-input-inline layui-show-xs-block">
									<select name="teaId" id="teaId">
										<option value="-1">请选择</option>
										<option value="1">首席讲师</option>
										<option value="2">高级讲师</option>
									</select>
								</div>
								<div class="layui-input-inline layui-show-xs-block">
									<button type="button" class="layui-btn" lay-filter="sreach" @click="selTr">
                                        <i class="layui-icon">&#xe615;</i></button>
								</div>
								<div class="layui-input-inline layui-show-xs-block">
									<button type="button" class="layui-btn" lay-filter="sreach" id="empty">
                                        <i class="layui-icon">清空</i></button>
								</div>
							</form>
						</div>
						<div class="layui-card-body ">
							<table class="layui-table layui-form" id="tb">
								<thead>
									<tr>
										<th>
											<input lay-skin="primary" name="checkId" lay-filter="allChoose" type='checkbox'>
										</th>
										<th>教师名称</th>
										<th>头衔</th>
										<th>简介</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="(tea, index) in pageArr">
										<td style="display:none;">{{ tea.id }}</td>
										<td>
											<input lay-skin="primary" name="checkId" v-model="checkTeaid" :value="tea.id" type="checkbox">
										</td>
										<td>{{ tea.name }}</td>
										<td v-if="tea.isStar==1">首席讲师</td>
										<td v-if="tea.isStar==2">高级讲师</td>
										<td>{{ tea.career }}</td>
									</tr>
								</tbody>
							</table>
							<div class="paging" id="pageHelper">
								<a href="#" @click="first" title="">首页</a>
								<a id="backpage" href="#" @click="last" title="">&lt;</a>
								<a href="#" @click="tiao(t)" title="" v-for="t in totalPage">{{ t }}</a>
								<a id="nextpage" href="#" @click="next" title="">&gt;</a>
								<a href="#" @click="end" title="">尾页</a>
								<a id="nextpage" href="#" title="">共{{ totalPage }}</a>
								<div class="clear"></div>
							</div>
						</div>
						<div class="layui-form-item">
							<label for="L_repass" class="layui-form-label"></label>
							<button class="layui-btn" lay-filter="add" onclick="addTeaIdCourId()" lay-submit="">提交</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="./js/jquery.min.js"></script>
		<script src="js/jquery.cookie.js"></script>
		<script src="./js/vue.min.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<script src="js/axios.min.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					teacher: [],
					checkTeaid: [],
					page: 1, //当前页
					totalPage: 0, //总页数
					pageArr: []
				},
				methods: {
					loading (){
						axios.defaults.headers.common["token2"] = $.cookie("token2");
						let _this = this;
						axios.get("http://localhost:9095/admin/eduCourse/AllTeacher").then(function(response) {
							_this.teacher = response.data.data;
							_this.pageArr = _this.teacher;
							console.log("长度："+_this.teacher.length)
							_this.totalPage = Math.ceil(_this.teacher.length / 5);
							_this.first();
						});
					},
					selTr(){
						axios.defaults.headers.common["token2"] = $.cookie("token2");
						var eduTeacher = new URLSearchParams();
						eduTeacher.append('id', $('#teaId option:selected').val());
						eduTeacher.append('name', $("#name").val());
						if ($("#name").val()=='' && $('#teaId option:selected').val()==-1){
							location.reload();
						}
						let _this = this;
						axios({
							method: "get",
							url: "http://localhost:9095/admin/eduCourse/AllTeacher",
							headers: {
								'Content-Type': 'application/x-www-form-urlencoded'
							},
							params: eduTeacher
						}).then(function(response) {
							console.log(response.data.data)
							if (response.data.data == null){
								//提示信息
								layer.alert('查询失败,暂无数据！', {
									icon: 5,
									title: '提示'
								});
								return;
							}
							_this.teacher = response.data.data;
							_this.pageArr = _this.teacher;
							_this.totalPage = Math.ceil(_this.teacher.length / 5);
							_this.first();
						});
					},
					//首页
					first: function() {
						this.page = 1;
						this.pageArr = pageHelp(this.teacher, 5, this.page);
					},
					//上一页
					last: function() {
						if(this.page == 1) {
							layer.msg('当前已是首页!', {
								icon: 1,
								time: 1000
							});
						} else {
							this.page = this.page - 1;
							this.pageArr = pageHelp(this.teacher, 5, this.page);
						}
					},
					//下一页
					next: function() {
						if(this.page == this.totalPage) {
							layer.msg('当前已是尾页!', {
								icon: 1,
								time: 1000
							});
						} else {
							this.page = this.page + 1;
							this.pageArr = pageHelp(this.teacher, 5, this.page);
						}
					},
					//末页
					end: function() {
						this.page = this.totalPage;
						this.pageArr = pageHelp(this.teacher, 5, this.totalPage);
					},
					tiao: function(obj) {
						this.page = obj;
						this.pageArr = pageHelp(this.teacher, 5, obj);
					}
				},
				created(){
					this.loading();
				}
			})
			
			
			function addTeaIdCourId(){
				obj = document.getElementsByName("checkId");
				check_val = [];
				for(k in obj) {
					if(obj[k].value!='on'){
						if(obj[k].checked){
							check_val+=obj[k].value+",";
						}
					}
				}
				console.log("check_val:"+check_val)
				if(check_val.length == 0){
					layer.alert('请为课程选择教师！', {
									icon: 5,
									title: '提示'
								});
				}else{
					check_val
					var id = '';
					$.ajax({
						type:"get",
						url:"http://localhost:9095/admin/eduCourse/getTeacherName",
						async:true,
						data:{
							"tid":check_val
						},
						headers: {
							"token2": $.cookie("token2")
						},
						success:function(msg){
							if (msg.code==200){
								for (var i=0;i<msg.data.length; i++) {
									console.log(msg.data[i].id+"---"+msg.data[i].name)
									id += "<tr><td style='display:none'>"+msg.data[i].id+"</td><td>"+msg.data[i].name+"</td><td><a href='#' onclick='del(this)'>删除</a></td></tr>";
									parent.$("#tb").html(id);
								}
								// 获得frame索引
			                    var index = parent.layer.getFrameIndex(window.name);
			                    //关闭当前frame
			                    parent.layer.close(index);
							}
						}
					});
				}
			}
			

		</script>
	</body>
	<script>
		layui.use(['laydate', 'form'],
			function() {
				var laydate = layui.laydate,
					form = layui.form;
					
				//清空
						$(document).on('click', '#empty', function() {
							$("#name").val("");
							$('#teaId').val('-1');
							//更新全部
							layui.form.render();
						});
				
				//全选
				form.on('checkbox(allChoose)', function(data){
				    var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
				    child.each(function(index, item){
				    	item.checked = data.elem.checked;
				    });
				    form.render('checkbox');
				});
			});
	</script>

</html>